<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.min.js"></script>
		<script src="js/util.js"></script>
		<script src="js/top.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/index.css" rel="stylesheet" />
	</head>
	<body>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
		<div class="mui-content" id="posts-container">
		</div>
		</div>
		<br>
		<script type="text/javascript">
			function fetchPosts() {
				fetch('http://tcp.gykang.eu.org:8080/api/posts')
					.then(response => response.json())
					.then(data => {
						const postsContainer = document.getElementById("posts-container");
						postsContainer.innerHTML = "";
						data.forEach(post => {
							const postElement = document.createElement("div");
							postElement.classList.add("post");
							const userInfo = document.createElement("div");
							userInfo.classList.add("user-info");
							userInfo.innerHTML = `
                            <img src="https://via.placeholder.com/40" alt="用户头像" class="avatar">  <!-- 用默认头像替代 -->
                            <div class="user-details">
                                <p class="username">${post.name}</p>
                                <p class="location"></p>
                            </div><p class="title">${post.title}</p>
                        `;
							const postContent = document.createElement("div");
							postContent.classList.add("post-content");
							postContent.innerHTML = `<p>${post.data}</p>`;
							const postImages = document.createElement("div");
							postImages.classList.add("post-images");
							const img = document.createElement("img");
							img.src = post.image_url;
							img.alt = "帖子图片";
							postImages.appendChild(img);
							const interactions = document.createElement("div");
							interactions.classList.add("interactions");
							interactions.innerHTML = `
                            <div class="like-comment">
                                <button class="like-btn">点赞</button>
                                <button class="comment-btn">评论</button>
                            </div>
                            <p class="likes-count">点赞 ${post.thumbs}</p>
                            <p class="comments-count">评论 ${post.comments}</p>
                        `;
							postElement.appendChild(userInfo);
							postElement.appendChild(postContent);
							postElement.appendChild(postImages);
							postElement.appendChild(interactions);
							postsContainer.appendChild(postElement);
						});
					})
					.catch(error => {
						console.error("获取帖子数据失败:", error);
					});
			}
			mui.init({
				swipeBack: false,
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style: 'circle',
						callback: pullupRefresh,
					}
				}
			});

			function pullupRefresh() {
				setTimeout(function() {
					fetchPosts();
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
					mui.toast('下拉刷新成功');
				}, 1000);
			}
			fetchPosts();
			//setInterval(fetchPosts, 10000);
		</script>
	</body>

</html>